<template>
    <div>
        <!--    头部表单-->
        <el-form :inline="true" :model="studentSearchForm" class="demo-form-inline">
            <el-form-item label="学生姓名">
                <el-input v-model="studentSearchForm.sname" placeholder="学生姓名"></el-input>
            </el-form-item>
            <el-form-item label="年龄">
                <el-input v-model="studentSearchForm.age" placeholder="学生年龄"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="initTable" round>搜索</el-button>
                <el-button type="primary" icon="el-icon-circle-plus-outline" size="medium" round @click="add">添加</el-button>
                <el-button type="danger"  size="medium" round @click="batchDelete()">批量删除</el-button>
            </el-form-item>
        </el-form>
        <!--    表格数据渲染-->
        <el-table
                :data="tableData"
                style="width: 100%"
                @selection-change="handleSelectionChange"
        >
            <!--        表格复选框-->
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="sid"
                    label="学生ID"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="sname"
                    label="学生姓名"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="age"
                    label="年龄"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="aclass.cname"
                    label="班级名称"
                    width="100">
            </el-table-column>
            <el-table-column
                    algin="center"
                    fixed="right"
                    label="操作">
                <template slot-scope="scope">
                    <el-button type="success" icon="el-icon-edit" size="medium" round @click="edits(scope.row)">编辑</el-button>
                    <el-button type="danger" icon="el-icon-delete" size="medium" round @click="del(scope.row)">删除</el-button>

                </template>
            </el-table-column>
        </el-table>
<!--        分页-->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="5"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>

        <!--    //修改学生信息对话框-->
        <el-dialog
                title="修改学生信息"
                :visible.sync="dialogVisible"
                width="30%"
        >

            <el-form ref="form" :model="editStudentForm" label-width="80px" >
                <el-form-item label="学生id">
                    <el-input v-model="editStudentForm.sid"></el-input>
                </el-form-item>
                <el-form-item label="姓名">
                    <el-input v-model="editStudentForm.sname"></el-input>
                </el-form-item>
                <el-form-item label="年龄">
                    <el-input v-model="editStudentForm.age"></el-input>
                </el-form-item>

                <el-form-item label="班级名称">
                    <el-select v-model="editStudentForm.ccid" placeholder="请选择">
                        <el-option v-for="item in classes"
                                   :key="item.cid"
                                   :label="item.cname"
                                   :value="item.cid">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>

            <el-button type="primary" @click="updateStudent" round>确认修改</el-button>
            <el-button @click="dialogVisible = false" round>取消</el-button>

        </el-dialog>

        <!--    添加学生对话框-->
        <el-dialog
                title="添加学生信息"
                :visible.sync="dialogVisible2"
                width="30%"
        >

            <el-form ref="form" :model="addStudentForm" label-width="80px" >

                <el-form-item label="姓名">
                    <el-input v-model="addStudentForm.sname"></el-input>
                </el-form-item>
                <el-form-item label="年龄">
                    <el-input v-model="addStudentForm.age"></el-input>
                </el-form-item>
                <el-form-item label="班级id">
                    <el-select v-model="addStudentForm.ccid" placeholder="请选择">
                        <el-option v-for="item in classes"
                                   :key="item.cid"
                                   :label="item.cid"
                                   :value="item.cid">
                        </el-option>
                    </el-select>
                </el-form-item>

            </el-form>

            <el-button type="primary"  @click="addStudent" round >确认添加</el-button>
            <el-button @click="dialogVisible2 = false" round>取消</el-button>

        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "Student",
        data(){
            return{
                //编辑对话框的显示与隐藏  true为显示 false为隐藏
                dialogVisible:false,
                dialogVisible2:false,
                //表格数据及分页
                tableData: [],
                currentPage:1,
                pageSize:5,
                total:0,
                //班级信息
                classes:[],
                //搜索表单学生对象
                studentSearchForm:{},
                //编辑表单对象
                edit:[],
                editStudentForm:[],
                //表格选中项
                multipleElection:[],
                //添加学生信息
                addStudentForm:{},
            }
        },
        //页面加载完之后走该方法
        created(){
            this.initTable();
            this.loadAll();
        },
        methods:{
            //查询班级信息
            loadAll(){
                this.axios.get("http://localhost:8080/class/find").then(result=>{
                    this.classes=result.data.data;
                    //console.log(className);
                    console.log(result);
                })
            },
            //查询数据
            initTable(){
                this.axios.post("http://localhost:8080/student/get/"+this.currentPage+"/"+this.pageSize,this.studentSearchForm).then(result=>{
                    this.tableData=result.data.data.records;
                    this.total=result.data.data.total;
                })

            },
            //改变每页的条数时触发
            handleSizeChange(val) {
                this.pageSize=val;
                this.initTable()
                //console.log(`每页 ${val} 条`);
            },
            //改变当前页码时触发
            handleCurrentChange(val) {
                this.currentPage=val;
                this.initTable();
                //console.log(`当前页: ${val}`);
            },
            //删除学生信息
            del(row){
                var sid = row.sid;
                console.log(sid)
                this.axios.delete("http://localhost:8080/student/delete/"+sid).then(result=>{
                    if(result.data.code===200){
                        this.$message.success("删除成功")//弹出成功消息
                        this.initTable();//重新加载数据
                    }
                })
            },
            //编辑学生信息
            edits(row){
                this.dialogVisible=true;
                this.editStudentForm=row;
            },
            //修改学生信息
            updateStudent(){
                this.axios.put("http://localhost:8080/student/update",this.editStudentForm).then(result=>{
                    if(result.data.code===200){
                        this.$message.success("修改成功");
                        //关闭对话框
                        this.dialogVisible=false;
                        //刷新页面
                        this.initTable();
                    }
                })

            },
            //获取表格选中的项
            handleSelectionChange(val){
                this.multipleElection=val;
            },
            //批量删除学生信息
            batchDelete(){
                this.ids = this.multipleElection.map(item=>item.sid);
                this.axios.delete("http://localhost:8080/student/deleteIds/"+this.ids).then(result=>{
                    if(result.data.code===200){
                        this.$message.success("删除成功");
                        this.initTable();
                    }
                })
            },
            add(){
                this.dialogVisible2=true;
            },
            //添加学生信息
            addStudent(){
                this.axios.post("http://localhost:8080/student/insert",this.addStudentForm).then(result=>{
                    if(result.data.code===200){
                        this.$message.success("添加成功");
                        //关闭对话框
                        this.dialogVisible2=false;
                        //刷新页面
                        this.initTable();
                    }
                })


            }
        }
    }
</script>

<style scoped>

</style>